<template>
    <article>
        <header>模态框</header>
        <section>
            <header>颜色</header>
            <div>
                <cv-button c="btn primary mini distant" @click="visible = true">模态框</cv-button>
                <cv-modal c="modal default medium" :visible.sync="visible">
                    <cv-form label="姓名" :labelWidth="3" c="form default medium distant-y not-null">
                        <cv-input c="input default medium" type="text"></cv-input>
                    </cv-form>
                    <cv-form label="住址" :labelWidth="3" c="form default medium distant-y">
                        <cv-input c="input default medium" type="text"></cv-input>
                    </cv-form>
                    <cv-form label="住址" :labelWidth="3" c="form default medium distant-y">
                        <cv-select c="select default medium" :options="options"></cv-select>
                    </cv-form>
                </cv-modal>
            </div>
        </section>
    </article>
</template>

<script>
    export default {
        name: "ExampleModal",
        data() {
            return {
                visible: false,
                options: {
                    foo: "foo",
                    bar: "bar",
                    foo2: "foo2",
                    bar2: "bar2",
                    foo3: "foo3",
                    bar3: "bar3",
                    foo4: "foo4",
                    bar4: "bar4"
                }
            };
        }
    }
</script>

<style scoped>
</style>
